<template>
  <div class="file-business-configuration" style="padding: 0 30px;margin-top: 10px;">
    <div class="content">
      <div style="margin: 10px 10px 10px 0;float: left">
        <el-button size="small" type="primary"  v-if="!!btnPermission['FileBusinessConfiguration-createFn']"
        :disabled="!btnPermission['FileBusinessConfiguration-createFn']" @click="creatFn">新建配置</el-button>
      </div>
      <TableComponent v-loading="isLoading" :assetList="tableDataList" :tableColumns="tableColumns"
        element-loading-text="加载中...">
        <template #bizFlag="{ row }">
          <el-tag :type="row.bizFlag ? '' : 'warning'">{{ row.bizFlag ? '业务' : '子业务' }}</el-tag>
        </template>
        <template #operation="{ row }">
          <el-button size="small" type="text" @click="updateFn(row)">编辑 </el-button>
        </template>
      </TableComponent>
      <el-pagination style="margin-top: 20px;float: right" background layout="total, prev, pager, next" :total="pageData.total"
          :currentPage="pageData.current" :page-size="pageData.size" @current-change="handlePageChange">
        </el-pagination>
      <!-- 创建和编辑窗口 -->
      <CreateFileBusinessConfiguration ref="createFileBusinessConfigurationRef" @feedbackFn="feedbackFn" />
    </div>
  </div>
</template>

<script setup>
import { ref , reactive, onMounted, computed} from 'vue';
import TableComponent from '@/components/TableComponent.vue';
import CreateFileBusinessConfiguration from './components/CreateFileBusinessConfiguration.vue';
import { queryByPageApi } from '@/api/fileBusinessConfigurationApi.js';
import { tableColumns } from '@/constant/fileBusinessConfiguration.js';
import {useStore} from 'vuex';

const store = useStore();
const btnPermission = computed(() => store.state.btnPermission);
const tableDataList = ref([])
const createFileBusinessConfigurationRef = ref(null)
const isLoading=ref(false)
const pageData = reactive({
  total: 0,
  current: 1,
  size: 10
})
// 创建
const creatFn = () => {
  createFileBusinessConfigurationRef.value.switchVisible('create',null)
}
const updateFn = (row) => {
  createFileBusinessConfigurationRef.value.switchVisible('edit',row)
}
// 创建完成后重调获取列表接口
const feedbackFn = () => {
    pageData.current = 1;
    getPageData();
}
// 获取列表接口
const getPageData = (size = 10) => {
  isLoading.value= true
    queryByPageApi({
        current: pageData.current,
        szie: size
    }).then(res => {
        if (res.data.code === 200) {
            tableDataList.value = res.data.data.records;
            pageData.total = res.data.data.total;
            isLoading.value= false
        }
    })
}
const handlePageChange = (val) => {
  pageData.current = val;
  getPageData();
};

// 挂载后
onMounted(() => {
  pageData.current = 1;
  getPageData();
})
</script>

<style lang="less" scoped></style>